<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<li>0</li>
		<li>1</li>
		<li>2</li>

		<script>
			// {
			// 	//：new Promise 是同步执行的，promise.then 里面的回调才是异步的。
			// 	console.log('同步代码1'); // 1，执行第一个同步任务
			// 	setTimeout(() => {
			// 		console.log('setTimeout') // 5，执行宏任务
			// 	}, 0)
			// 	new Promise((resolve) => {
			// 		console.log('同步代码2') // 2，执行第二个同步任务
			// 		resolve()
			// 	}).then(() => {
			// 		console.log('promise.then') // 4，执行微任务
			// 	})
			// 	console.log('同步代码3'); // 3，执行第三个同步任务
			// 	// 最终输出"同步代码1"、"同步代码2"、"同步代码3"、"promise.then"、"setTimeout"
			// }

			// {
			// 	setTimeout(() => {
			// 		console.log('setTimeout start'); // 6，执行宏任务里的第一个任务
			// 		new Promise((resolve) => {
			// 			console.log('promise1 start'); // 7，执行宏任务里的第二个任务
			// 			resolve();
			// 		}).then(() => {
			// 			console.log('promise1 end'); // 9，执行宏任务里的微任务
			// 		})
			// 		console.log('setTimeout end'); // 8，执行宏任务里的第三个任务
			// 	}, 0);
			// 	function promise2() {
			// 		return new Promise((resolve) => {
			// 			console.log('promise2'); // 2，执行第二个同步任务
			// 			resolve();
			// 		}).then(() => {
			// 			console.log('promise2.then'); // 4，执行第一个微任务
			// 		})
			// 	}
			// 	async function async1() {
			// 		console.log('async1 start'); // 1，执行第一个同步任务
			// 		await promise2();
			// 		console.log('async1 end'); // 5，执行第二个微任务
			// 	}
			// 	async1();
			// 	console.log('script end'); // 3，执行第三个同步任务

			// 	// async1 start, promise2, script end, promise2.then, async1 end, setTimeout start, promise1 start, setTimeout end, promise1 end
			// }

			// {
			// 	// 宏任务队列 1
			// 	setTimeout(() => {
			// 		// 宏任务队列 2.1
			// 		console.log('timer_1');
			// 		setTimeout(() => {
			// 			// 宏任务队列 3
			// 			console.log('timer_3')
			// 		}, 0)
			// 		new Promise(resolve => {
			// 			resolve()
			// 			console.log('new promise')
			// 		}).then(() => {
			// 			// 微任务队列 1
			// 			console.log('promise then')
			// 		})
			// 	}, 0)
			// 	setTimeout(() => {
			// 		// 宏任务队列 2.2
			// 		console.log('timer_2')
			// 	}, 0)
			// 	console.log('Sync queue')
			// 	// Sync queue, timer_1, new promise, promise then, timer_2, timer_3
			// }

			// {
			// 	async function async1() {
			// 		console.log('async1 start'); // 2，第二个同步任务
			// 		await async2();
			// 		console.log('async1 end'); // 6，第一个微任务
			// 	}
			// 	async function async2() {
			// 		console.log('async2'); // 3 第三个同步任务
			// 	}
			// 	console.log('script start'); // 1，第一个同步任务
			// 	setTimeout(function() {
			// 		console.log('setTimeout'); // 8，执行宏任务
			// 	}, 0)
			// 	async1();
			// 	new Promise(function(resolve) {
			// 		console.log('promise1'); // 4 第四个同步任务
			// 		resolve();
			// 	}).then(function() {
			// 		console.log('promise2'); // 7，第二个微任务
			// 	});
			// 	console.log('script end'); // 5，第五个同步任务
			// 	// script start, async1 start, async2, promise1, script end, async1 end', promise2, setTimeout
			// }
			
			// {
			// 	console.log('1');
			// 	setTimeout(function() {
			// 		console.log('2');
			// 		// process.nextTick(function() {
			// 		// 	console.log('3');
			// 		// })
			// 		new Promise(function(resolve) {
			// 			console.log('4');
			// 			resolve();
			// 		}).then(function() {
			// 			console.log('5')
			// 		})
			// 	})
			// 	// process.nextTick(function() {
			// 	// 	console.log('6');
			// 	// })
			// 	new Promise(function(resolve) {
			// 		console.log('7');
			// 		resolve();
			// 	}).then(function() {
			// 		console.log('8')
			// 	})
			// 	setTimeout(function() {
			// 		console.log('9');
			// 		// process.nextTick(function() {
			// 		// 	console.log('10');
			// 		// })
			// 		new Promise(function(resolve) {
			// 			console.log('11');
			// 			resolve();
			// 		}).then(function() {
			// 			console.log('12')
			// 		})
			// 	})
			// 	// 1 7 6 8 2 4 3 5 9 11 10 12
			// }
			
			// {
			// 	async function a1() {
			// 		console.log('a1 start')
			// 		await a2()
			// 		console.log('a1 end')
			// 	}
			// 	async function a2() {
			// 		console.log('a2')
			// 	}
			// 	console.log('script start')
			// 	setTimeout(() => {
			// 		console.log('setTimeout')
			// 	}, 0)
			// 	Promise.resolve().then(() => {
			// 		console.log('promise1')
			// 	})
			// 	a1()
			// 	let promise2 = new Promise((resolve) => {
			// 		resolve('promise2.then')
			// 		console.log('promise2')
			// 	})
			// 	promise2.then((res) => {
			// 		console.log(res)
			// 		Promise.resolve().then(() => {
			// 			console.log('promise3')
			// 		})
			// 	})
			// 	Promise.resolve().then(() => {
			// 		console.log('promiseTag')
			// 	})
			// 	// process.nextTick(function() {
			// 	// 	console.log('nextTick');
			// 	// })
			// 	console.log('script end')
			// 	// script start, a1 start, a2, promise2, script end, nextTick，promise1, a1 end, promise2.then, promiseTag, promise3, setTimeout
			// }
			
			// {
			// 	setTimeout(function() {
			// 		console.log('setTimeout')
			// 	}, 0)
			// 	console.log('script start')
			// 	async function async1() {
			// 		console.log('async1 start');
			// 		await async2()
			// 		console.log('async1 end')
			// 	}
			// 	async function async2() {
			// 		console.log('async2 end')
			// 	}
			// 	new Promise(function(resolve) {
			// 		console.log('promise')
			// 		for (var i = 0; i < 10000; i++) {
			// 			if (i === 10) {
			// 				console.log("3")
			// 			}
			// 			i == 9999 && resolve('4')
			// 		}
			// 		resolve();
			// 	}).then(function(val) {
			// 		console.log(val)
			// 		console.log('promise1')
			// 		// return 5
			// 	}).then(function(res) {
			// 		console.log(res)
			// 		console.log('promise2')
			// 	})
			// 	async1();
			// 	console.log('script end')
			//   // script start，promise，3，async1 start，async2 end，script end，4，promise1，async1 end，undefined，promise2，setTimeout
			// }
			
			// {
			// 	console.log('aaa');
			// 	new Promise((resolve) => {
			// 		console.log('bbb');
			// 		resolve();
			// 		new Promise((resolve) => {
			// 			console.log('ccc');
			// 			resolve();
			// 		}).then(() => {
			// 			console.log('111');
			// 			new Promise((resolve) => {
			// 				console.log('eee');
			// 				resolve();
			// 			}).then(() => {
			// 				console.log('fff');
			// 			})
			// 		})
			// 	}).then(() => {
			// 		console.log('ggg');
			// 		new Promise((resolve, reject) => {
			// 			console.log('222');
			// 			resolve();
			// 		}).then(() => {
			// 			console.log('333')
			// 		})
			// 	})
			// 	console.log('hhh');
			// 	// document.write('aaa', 'bbb', 'ccc', 'hhh', '111', 'eee', 'fff')
			// 	document.write('aaa', 'bbb', 'ccc', 'hhh', '111', 'eee', 'ggg', '222', 'fff', '333')
			// }
			
			{
				const shape = {
					radius: 10,
					diameter() {
						return this.radius * 2;
					},
					perimeter: () => 2 * Math.PI * this.radius
				};
				console.log(shape.diameter()); // 20
				console.log(shape.perimeter()); // NaN
				for (var i = 0; i < 3; i++) {
					setTimeout(() => console.log(i), 500) // 3, 3, 3
				}
				for (let i = 0; i < 3; i++) {
					setTimeout(() => console.log(i), 500) // 0, 1, 2
				}
				let list = document.querySelectorAll('li');
				for (var i = 0; i < list.length; i++) {
					list[i].onclick = () => console.log(i); // 0 1 2
				}
			}
		</script>
	</body>
</html>